<template>
  <div id="addevaluate">
    <c-title :hide="false" text="追加评价"></c-title>
    <div class="additional">
      <h3 class="add-title">追加评论：</h3>
      <van-cell-group>
        <van-field v-model="reComment" type="textarea" placeholder="补充评论内容，长度在5-100字之间~" rows="4" />
      </van-cell-group>
      <div class="print">
        <h3>晒图：</h3>
        <div class="print-img flex">
          <block v-for="(val, index) in fileList4" :key="index">
            <div class="photobox flex" :key="index" style=" max-width: 5.625rem;">
              <img :src="val.url" style="max-width: 5.625rem;" />
              <i class="iconfont icon-all_filldelete" @click="removeImg_1(index)"></i>
            </div>
          </block>
          <div class="img-upload flex">
            <van-uploader :disabled="fileList4.length >= 5" :after-read="multipleMethod_1" multiple>
              <div class="upload flex-a-c flex-j-c">
                <div class="crucifix" ></div>
              </div>
            </van-uploader>
          </div>
        </div>
      </div>
    </div>
    <div class="mh-90"></div>
    <div class="evaluate-btn" @click="toReComment">提交评价</div>
  </div>
</template>
<script>
import order_list_addevaluatecontroller from "./addevaluatecontroller";
export default order_list_addevaluatecontroller;
</script>
<style scoped>
  .additional ::v-deep .van-field {
    background-color: #F5F5F5;
    padding:0.75rem;
    border-radius: 0.25rem;
  }
  .print-img ::v-deep .van-uploader__wrapper {
    border-radius: 0.25rem;
  }
  ::v-deep .van-field__control::-webkit-input-placeholder {
    color: #666;
  }
   .pcStyle  #addevaluate .evaluate-btn {
    left: auto;
  }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
#addevaluate {
  .additional {
    padding: 0.75rem 0.75rem 0 0.75rem;
    background-color: #fff;
    border-radius: 0.5rem;
    margin:0.5rem 0.75rem 0.75rem 0.75rem;
    .add-title {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.25rem;
      color: #333333;
      text-align: left;
      padding:0 0 0.75rem 0;
    }
    .print {
        h3 {
          padding:1.25rem 0 0.75rem 0;
          font-size: 0.875rem;
          line-height: 1.25rem;
          color: #333333;
          text-align: left;
          font-weight: 400;
        }
        .print-img {
          flex-wrap: wrap;
        }
        .photobox {
          flex-wrap: wrap;
          margin:0 1rem 0.75rem 0;
          position: relative;
          img {
            margin:0;
            border-radius: 0.25rem;
            height: 5.625rem;

          }
          .icon-all_filldelete {
            position: absolute;
            top:-0.5rem;
            right:-0.5rem;
          }
        }
        .img-upload {
          position: relative;
          margin:0 0 0.75rem 0;
          .upload {
            width: 5.625rem;
            height: 5.625rem;
            border-radius: 0.25rem;
            background-color: #F5F5F5;
            position: relative;
            .crucifix {
              /* 十字架样式 */
              width: 1.375rem;
              height: 0.125rem;
              background: #b2b2b2;
              border-radius:0.625rem;
              position: relative;

              &::after {
                content: "";
                width: 1.375rem;
                height: 0.125rem;
                background: #b2b2b2;
                border-radius:0.625rem;
                position: absolute;
                transform: rotate(-90deg);
                left: 0;
              }
            }
          }
        }
    }
  }
  .evaluate-btn {
      width: 21.875rem;
      background-color:var(--themeBaseColor);
      border-radius: 0.25rem;
      margin:0 0.75rem;
      padding:0.625rem 0;
      position: fixed;
      bottom:0.875rem;
      left:0;
      z-index: 9;
      font-size: 0.875rem;
      font-weight: bold;
      line-height: 1.25rem;
      color: #FFFFFF;
  }
}
</style>
